<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="js/rem.js"></script>
    <script src="js/border1px.js"></script>

    <style>

        .tarbar {
           width:7.5rem;
           height:0.92rem;
           box-shadow: 0 0 0.2rem 0 hsl(0deg 6% 58% / 60%);
           position: fixed;
           bottom:0;
           display: flex;
           justify-content: space-between;   
        }

        .box {
            width:7.5rem;
            height:2rem;
            background: pink;
            color:white;
        }
        .item {
            color:blue;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="hd">分类</div> 
        <ul class="bd" id="list">
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>

    <!-- tarbar begin -->
    <div class="tarbar">
        <div class="tarbar-item active">
            <a href="/lession7-3(tarbar).html">
                <img src="imgs/jd/tarbar-item1-default.png" />
            </a>
        </div>
        <div class="tarbar-item">
            <a href="/lession7-3-2.html">
                <img src="imgs/jd/tarbar-item2-active.png" />
            </a>
        </div>
        <div class="tarbar-item">
            <img src="imgs/jd/tarbar-item3.png" />
        </div>
        <div class="tarbar-item">
            <img src="imgs/jd/tarbar-item4.png" />
        </div>
        <div class="tarbar-item">
            <img src="imgs/jd/tarbar-item5.png" />
        </div>
    </div>
    <!-- tarbar end -->
    <script src="/libs/zepto/zepto.js"></script>
    <script src="/libs/zepto/ajax.js"></script>
    <script src="/libs/zepto/event.js"></script>
    
    <script>
        var html = '';
        $.ajax({
            url: 'http://youyong.ba:8080/mock/609a94bd9fdbd7143b8d6737/aa/manage/list/index',
            success: function (res) {
                console.log(res, '<---');
                if (res.status) {
                    for (var i =0; i< res.data.length; i++) {
                        html += '<li class="item">'+res.data[i].channelName+'</li>'
                    }
                    
                    console.log($('#list'), '<---');
                    console.log(html, 'html');
                    $('#list').html(html);
                    
                } else {
                    $('#list').html('<li class="item">'+res.msg+'</li>');
                }
            }
        })
    </script>
</body>
</html>